let dataObj,spanObj;
window.onload = function () {
    dataObj = document.getElementById("data");
    spanObj = document.getElementById("totalSpan");
    var txtArray = document.getElementsByTagName("input");
    for(var i = 0; i < txtArray.length; i++){
        if(txtArray[i].type == "text"){
            txtArray[i].onblur = function () {
                changeNum(this);
            }
        }else if(txtArray[i].type == "button"){
            txtArray[i].onclick = function () {
                removeProduct(this);
            }
        }
    }
    Total();
}

function changeNum(txtObj) {
    let num = parseInt(txtObj.value);
    if (isNaN(num)){
        num = 1;
    }
    txtObj.value = num;
    //得到元素对象的父节点对象
    var price = txtObj.parentElement.previousElementSibling.innerHTML;
    txtObj.parentElement.nextElementSibling.innerHTML = price * num;
    Total();
}

function removeProduct(inptObj) {
    var trObj = inptObj.parentElement.parentElement;
    dataObj.removeChild(trObj);
    Total();
}

function Total() {
    var x = 0;
    var trArray = document.getElementsByTagName("tr");
    for(var i = 1; i < trArray.length; i++){
        x += parseInt(trArray[i].getElementsByTagName("td")[3].innerHTML);
    }
    spanObj.innerHTML = x;
}